<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2024-09-16 16:58:29
 * @LastEditors: Cxy
 * @LastEditTime: 2025-01-12 17:10:28
 * @FilePath: \xy-admin\play\src\views\components\layout.vue
-->
<script setup lang="ts">
import { XyIcon, XyIconRender } from '@/components/XyIcon'
const formList1 = reactive<FormList>([
  {
    label: '输入框',
    prop: '1',
    type: 'input',
    colspan: 2,
    placeholder: '请输入姓名',
    rule: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    header: () => h(XyIcon, { icon: 'ep/user-filled' }),
    prepend: '姓名前缀',
    append: () => h('div', { style: { color: 'red' } }, '年龄后缀'),
    description: '解释文案'
  },
  {
    label: '文本域',
    prop: '2',
    type: 'textarea',
    colspan: 2,
    placeholder: '请输入姓名',
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '标签标题',
    type: 'card.tag'
  },
  {
    label: '普通',
    prop: '4',
    type: 'checkbox',
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '按钮',
    prop: '5',
    value: [1],
    type: 'checkbox.button',
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '普通（全部）',
    prop: '6',
    value: [2],
    type: 'checkboxGroup',
    data: [
      { label: '选项1', value: 1, disabled: true },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    colspan: 1,
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '按钮（全部）',
    prop: '7',
    value: [1],
    6: [2],
    disabled: true,
    type: 'checkboxGroup.button',
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '分割线标题',
    type: 'card.divider',
    contentPosition: 'center'
  },
  {
    label: '日期',
    prop: '8',
    colspan: 2,
    rule: [{ required: true, trigger: 'blur' }],
    type: 'date'
  },
  {
    label: '普通标题',
    type: 'card',
    contentPosition: 'right'
  },
  {
    label: '下拉框',
    type: 'select',
    prop: '9',
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  }
])
const formList2 = reactive<FormList>([
  {
    label: '单卡片布局（tag, divider）',
    type: 'tag',
    contentPosition: 'center'
  },
  {
    label: '哈哈嘿嘿7',
    prop: '1',
    type: 'select',
    rule: [{ required: true, trigger: 'blur' }],
    data: [
      { label: '哈哈', value: 1 },
      { label: '嘿嘿', value: 2 }
    ]
  },
  {
    label: '标题21',
    type: 'divider'
  },
  {
    label: '日期8',
    prop: '2',
    colspan: 2,
    rule: [{ required: true, trigger: 'blur' }],
    type: 'date'
  },
  {
    label: '姓名',
    prop: 'name',
    type: 'input',
    rule: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
  },
  {
    label: '年龄',
    prop: '3',
    type: 'input',
    autocomplete: 'on',
    rule: [{ required: true, trigger: 'blur' }]
  }
])
const column = reactive<FormList>([
  {
    label: '多列布局（column）',
    type: 'card',
    contentPosition: 'left'
  }
])
const autoMinWidth = reactive<FormList>([
  {
    label: '自适应最小宽度布局（minWidth）   与多列布局（column）冲突即设置此值多列布局（column）失效',
    type: 'card'
  }
])
const cardGroup = reactive<FormList>([
  {
    label: '卡片组布局（card，card.divider，card.tag）',
    type: 'card'
  }
])
const cardWaterfallFlow = reactive<FormList>([
  {
    label: '瀑布流布局（cardWaterfallFlow）',
    type: 'card'
  }
])
const step = reactive<FormList>([
  {
    label: '步骤条布局（step）111',
    type: 'steps',
    children: [
      {
        label: '标题1',
        type: 'card.tag'
      },
      ...formList1
    ]
  },
  {
    label: '步骤条布局（step）222',
    type: 'steps',
    icon: markRaw(XyIconRender('ep/user-filled')),
    description: '哈哈哈哈哈哈',
    children: [
      {
        label: '标题2',
        type: 'card.divider'
      },
      {
        label: '姓名2',
        prop: 'steps1',
        type: 'input',
        rule: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
      },
      {
        label: '年龄2',
        prop: 'steps2',
        type: 'input',
        rule: [{ required: true, trigger: 'blur' }]
      }
    ]
  }
])
</script>

<template>
  <XyAddForm :column="4" :formList="column.concat(formList1)" />
  <XyAddForm :column="3" :formList="autoMinWidth.concat(formList1)" :minWidth="270" />
  <XyAddForm :column="3" :formList="cardGroup.concat(formList1)" />
  <XyAddForm :column="4" :formList="formList2" isCard />
  <XyAddForm
    :column="1"
    :cardWaterfallFlow="{ isShow: true, gap: 10, minWidth: 270 }"
    :formList="cardWaterfallFlow.concat(formList1)"
  />
  <XyAddForm :column="3" :formList="step" stepSimple />
</template>
<style scoped lang="less"></style>
